<template>
	<view class="content">
		<view class="info-tit">{{status==0?'可使用':status==1?'已使用':status==2?'已过期':''}}</view>
		<view class="formBox basic-info">
			<view class="f-c-sb"><view class="label">活动编号</view><view class="value">{{detail.activityId}}</view></view>
			<view class="f-c-sb"><view class="label">活动名称</view><view class="value">{{detail.activityName}}</view></view>
			<view class="f-c-sb"><view class="label">活动类型</view><view class="value">{{detail.activityType}}</view></view>
			<view class="f-c-sb"><view class="label">支付方式</view><view class="value">{{detail.payWay}}</view></view>
			<view class="f-c-sb"><view class="label">支付时间</view><view class="value">{{detail.payTime}}</view></view>
			<view class="f-c-sb"><view class="label">金额</view><view class="value money">￥{{detail.amount}}</view></view>
		</view>
		<!-- 权益卡片 -->
		<view class="equities-bg">
			<view class="line"></view>
			<view class="qy-tit">{{detail.activityName}}</view>
			<view class="end-time">有效期至：{{detail.deadlineTime}}</view>
			<view class="worth">价值 ¥{{detail.amount}}</view>
		</view>
		<!-- 礼包说明 -->
		<view class="formBox card-explain">
			<view class="explain-tit">礼包说明</view>
			<view class="explain-item f-c-sb" v-for="(item,index) in detail.giftList">
				<image :src="imagePath+'glxcx/card-icon.png'" mode="" class="logo"></image>
				<view class="num num-line">{{item.couponName}}</view>
				<view class="worth">价值{{item.money}}元</view>
			</view>
		</view>
		<!-- 权益说明 -->
		<view class="formBox card-explain">
			<view class="explain-tit">权益说明</view>
			<view class="explain-item f-fs-sb">
				<image :src="imagePath+'glxcx/card-icon.png'" mode="" class="logo logo-marin"></image>
				<view class="num">{{detail.rightsContent}}</view>
			</view>
		</view>
		<!-- 适宜门店 -->
		<view class="formBox card-explain">
			<view class="explain-tit">适宜门店</view>
			<view class="explain-item f-fs-sb" v-for="(item,index) in detail.joinStoresList" :key="index">
				<image :src="imagePath+'glxcx/card-icon.png'" mode="" class="logo logo-marin"></image>
				<view class="num" >
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {customerRightsDetail } from '@/api/index'
	export default {
		data() {
			return {
			imagePath:this.$imagePath,
			activityOrderNo:'',
				detail:{},
				status:0
			}},
		onLoad(option) {
			this.activityOrderNo=JSON.parse(option.param).activityOrderNo
			this.status=JSON.parse(option.param).status
			this.getdetail()
		},
		methods: {
			getdetail(){
				customerRightsDetail({activityOrderNo:this.activityOrderNo}).then(res=>{
					this.detail=res.data
				})
			}
		}
	}
</script>

<style lang="less">
.content{
	padding: 20rpx 0;
	background: #F5F5F5;
	.info-tit{
		width: 702rpx;
		margin: 0 auto;
	}
	.basic-info{
		border-radius: 18px;
		.value{
			font-weight: bold;
			font-size: 28rpx;
			flex: 1;
			text-align: right;
			padding-left: 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.money{
			color: #FF6738;
		}
		.label{
			font-size: 28rpx;
		}
		.f-c-sb{
			padding: 30rpx 0;
			border-bottom: 1px solid #EDEDED;
		}
		.f-c-sb:last-child{
			border: none;
			padding-bottom: 15rpx;
		}
	}
	.equities-bg{
		width: 660rpx;
		height: 284rpx;
		padding: 54rpx 54rpx 40rpx;
		margin: auto;
		background-image: url('https://sj.shopec.com.cn/image-server/glxcx/equities-bg.png');
		background-size: 660rpx 284rpx;
		border-radius: 18px;
		color: #fff;
		.line{
			width: 112rpx;
			height: 13rpx;
			background: #509cfe;
			border-radius: 7px;
		}
		.qy-tit{
			font-size: 36rpx;
			font-weight: bold;
			margin: 20rpx 0 14rpx;
		}
		.end-time{
			display: inline-block;
			background: #4d9afd;
			border-radius: 3px;
			font-size: 18rpx;
			padding: 6rpx;
			margin-bottom: 40rpx;
		}
		.worth{
			font-size: 24rpx;
		}
	}
	.card-explain{
		padding: 0 56rpx 30rpx;
		border-radius: 18px;
		.explain-tit{
			position: relative;
			display: block;
			margin: auto;
			text-align: center;
			font-size: 28rpx;
			font-weight: 700;
			padding: 40rpx 0 30rpx;
		}
		.explain-item{
			font-size: 26rpx;
			line-height: 2;
			.logo{
				width: 21rpx;
				height: 21rpx;
			}
			.logo-marin{
				transform: translateY(16rpx);
			}
			.num{
				flex: 1;
				padding: 0 10rpx;
				font-weight: 500;
				text-align: left;
				color: #666666;
			}
			.num-line{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.worth{
				color: #333333;
			}
		}
	}
}
</style>
